//行事历
import React, {Component} from 'react';
import {
  Text,
  StyleSheet,
  ScrollView,
  View,
  FlatList,
  TouchableOpacity
} from 'react-native';
import {Calendar, LocaleConfig} from 'react-native-calendars';
import {I18n} from "../../configs/enumeration";
import {GetPlansApi} from "../../configs/api";
import styles from "../../configs/styles";
import FormatDate from '../../helpers/dateFormat'
import AddNew from '../common/add_new'
import {connect} from 'react-redux'

LocaleConfig.locales['ch'] = {
  monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  monthNamesShort: ['一.', '二.', '三', '四', '五', '六', '七.', '八', '九', '十', '十一', '十二'],
  dayNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
  dayNamesShort: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat']
};

LocaleConfig.defaultLocale = 'ch';

class CalendarsScreen extends Component {

  constructor(props) {
    super(props);
    this.onDayPress = this.onDayPress.bind(this);
    this.state = {
      data: [],
      loading: true,
      markedDates: {},
      currentDate: FormatDate(new Date())
    }
  }

  componentWillReceiveProps () {
    this.getData(this.state.currentDate)
  }


  componentDidMount() {
    this.getData(this.state.currentDate)
  }

  getData = (day, onlyChangeMarkedDates = false) => {
    GetPlansApi(day, onlyChangeMarkedDates).then((data) => {
      if (onlyChangeMarkedDates) {
        this.setState({
          loading: false,
          markedDates: data.marked_dates
        })
      } else {
        this.setState({
          data: data.plans,
          loading: false,
          markedDates: data.marked_dates
        })
      }
    })
  };

  // 点击某天
  onDayPress = (day) => {
    this.setState({
      currentDate: day.dateString
    });
    this.getData(day.dateString);
  };

  // 切换月份
  onMonthChange = (day) => {
    let current_day = new Date();
    if (day.month == current_day.getMonth() + 1 && day.year == current_day.getFullYear()) {
      this.getData(day.dateString);
    } else {
      this.getData(day.dateString, true);
    }
  };

  //用于给FlatList的每一条item指定一个key
  _keyExtractor = (item, index) => index;

  //每一条item的模板
  _renderItem = ({item}) => {
    return (
      <TouchableOpacity style={styles.planListItemContainer} onPress={() => {
        this.props.navigation.navigate('planShow', {
          plan_id: item.id, afterDestroy: (happened_at) => {
            this.getData(happened_at)
          }
        })
      }}>
        <View style={{margin: 15}}>
          <Text style={{color: '#49505A'}}>{item.start_at}-{item.end_at}</Text>
        </View>
        <View style={{marginLeft: 15, marginBottom: 15}}>
          <Text style={{fontSize: 18, color: '#454957'}}>{item.title}</Text>
        </View>
      </TouchableOpacity>
    )
  };

  newPlan = () => {
    this.props.navigation.navigate('planNew', {
      current_date: this.state.currentDate,
      afterCreate: (happened_at) => {
        this.getData(happened_at)
      }
    })
  };

  render() {
    const {loading, data, markedDates} = this.state;
    return (
      <View style={{flexDirection: 'column', flex: 1}} key={ this.props.user.school_id }>

        <View>
          <ScrollView>
            <Calendar
              onDayPress={this.onDayPress}
              onMonthChange={this.onMonthChange}
              style={styles.calendar}
              hideExtraDays
              markedDates={markedDates}
            />
          </ScrollView>
        </View>

        <View style={{justifyContent: 'flex-start', marginTop: 20, flex: 1}}>
          <FlatList
            data={data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
          />
        </View>

        <View>
          <AddNew
            onPress={this.newPlan}
          />
        </View>

      </View>

    );
  }
}
const mapStateToProps = (state) => {
  return {
    user: state.user
  }
};

export default connect(mapStateToProps)(CalendarsScreen)